{% extends "admin/base_site_nav.html" %}
{% load i18n %}

{% block content_title %}{{ block.super }}{% tabs opts %}{% endblock %}

{% block extrahead %}{{block.super}}
<script>
function enableSave() {
  $('#submit').removeClass('disabled').addClass('btn-danger').removeClass('btn-primary');
}
</script>
{% endblock %}

{% block tools %}
{% include "common/snippet_follow.html" %}
<h1>
<button class="btn btn-sm d-none d-md-inline-block btn-primary ms-2" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="{% trans 'help'|capfirst|force_escape %}"
  onclick="window.open('{% setting "DOCUMENTATION_URL" %}/docs/{% version_short %}/user-interface/getting-around/messages.html');">
  <span class="fa fa-question"></span>
</button>
</h1>
{% endblock %}

{% block content %}
  <div id="content-main" class="row" style="min-height: 150px">
    <div class="col-md-12">
{% if perms.common.add_comment %}
      <form method="post" enctype="multipart/form-data">{% csrf_token %}
        <textarea id="comment" name="comment" class="form-control" rows="10" style="width:100%; resize:vertical" oninput="enableSave()"></textarea>
        <label for="attachment">{% trans "Add an attachment" %}
        <input style="padding-top: 1em; display:inline" type="file" name="attachment" accept="{% setting 'MEDIA_EXTENSIONS' %}" id="attachment" onchange="enableSave()">
        </label>
        <div style="margin-top: 0.7em"><button id="submit" type="submit" class="btn btn-primary disabled" role="button" value="{% filter force_escape %}{% trans 'Save' %}{% endfilter %}">{% filter force_escape %}{% trans 'Save' %}{% endfilter %}</button></div>
      </form>{% endif%}

{% for c in comments %}
      <h3>
      <span data-bs-toggle="tooltip" data-bs-title="{{ c.user.get_full_name }}">
        {% if c.user.avatar %}<img class="avatar-sm" src="/uploads/{{ c.user.avatar }}">{% endif %}
        {{ c.user.username }}
      </span>
      &nbsp;&nbsp;<small data-bs-toggle="tooltip" data-bs-title="{{ c.lastmodified|date:"DATETIME_FORMAT" }}">{{ c.lastmodified | timesince }}</small>
      </h3>
      <div class="clearfix">
      {% if c.attachment %}
      <div class="pull-left" style="width: 100px">{{c.attachmentlink}}</div>
      {% endif %}
      <pre>{% if c.safe %}{{c.comment|safe}}{% else %}{{c.comment}}{% endif %}</pre>
      </div>
{% endfor %}

     </div>
	</div>
{% endblock %}
